<template>
	<view class="bgColor" @click="hideTools()">
		<watermark></watermark>
		<view class="favorites-wx">
			<view class="favorites-wx-top">
				<view class="favorites-wx-top-item" v-for="(v,i) in types" :key="i" @click="clickType(v)">{{v.label}}</view>
				<!-- <view class="favorites-wx-tips">点击预览，按住卡片显示操作项</view> -->
			</view>
			<uni-swipe-action>
				<uni-swipe-action-item class="favorites-uni-swipe-action-item" v-for="(v,i) in list" :key="i">
					<view class="favorites-wx-item" :class="{favoriteswxitemactive:v.isSelect}" @click="tapListItem(i)" @longpress="longpressItem" :data-key="i">
						<view class="favorites-wx-content favorites-wx-content-text" v-if="v.collectType=='TEXT'">
							<block :key="index" v-for="(textitem, index) in textChuli(v.content)">
								<text space="nbsp" class="favorites-wx-text" v-if="textitem.type == 'text'">{{textitem.text}}</text>
								<text space="nbsp" class="favorites-wx-text" v-if="textitem.type == 'url'" style="color:#4D6B8B;">{{textitem.text}}</text>
							</block>
						</view>
						<view class="favorites-wx-content favorites-wx-content-img" v-if="v.collectType=='IMAGE'">
							<image :src="returnParse(v.content).url" mode="aspectFill"></image>
						</view>
						<view class="favorites-wx-content favorites-wx-content-video" v-if="v.collectType=='VIDEO'">
							<view class="favorites-wx-content-video-img">
								<image :src="returnParse(v.content).url" mode="aspectFill"></image>
								<view class="favorites-wx-content-video-icon">
									<text class="wxfont bofang"></text>
								</view>
							</view>
						</view>
						<view class="favorites-wx-content favorites-wx-content-location" v-if="v.collectType=='LOCATION'">
							<view class="favorites-wx-content-location-box">
								<view class="favorites-wx-content-location-box-name">{{returnParse(v.content).name}}</view>
								<view class="favorites-wx-content-location-box-address">{{returnParse(v.content).address}}</view>	
								<image class="favorites-wx-content-location-box-map" src="../../static/wx/map.png" mode="aspectFit"></image>
							</view>
						</view>
						<view class="favorites-wx-content favorites-wx-content-voice" v-if="v.collectType=='VOICE'">
							<view class="favorites-wx-content-voice-box">
								<view class="favorites-wx-content-voice-content">
									<!-- <text>{{returnParse(v.content).time}}</text> -->
									<text class="wxfont yuyin" :class="{vmove:paused}"></text>
								</view>
								<view>{{returnParse(v.content).time}}秒</view>
							</view>
						</view>
						<view class="favorites-wx-content" v-if="v.collectType=='FILE'">
							<view class="favorites-wx-content-card">
								<view class="favorites-wx-content-card-top">
									<image class="favorites-wx-content-card-top-img" :src="getFileType(returnParse(v.content))"></image>
									<view class="favorites-wx-content-card-top-content">
										<view class="favorites-wx-content-card-title">{{returnParse(v.content).name}}</view>
										<view class="favorites-wx-content-card-no">{{format_size(returnParse(v.content).size)}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="favorites-wx-content" v-if="v.collectType=='CARD'">
							<view class="favorites-wx-content-card">
								<view class="favorites-wx-content-card-top">
									<image class="favorites-wx-content-card-top-img" :src="returnParse(v.content).avatar"></image>
									<view class="favorites-wx-content-card-top-content">
										<view class="favorites-wx-content-card-title">{{returnParse(v.content).name}}</view>
										<view class="favorites-wx-content-card-no">{{returnParse(v.content).chatNo}}</view>
									</view>
								</view>
								<view class="favorites-wx-content-card-card">名片</view>
							</view>
						</view>
						<view class="favorites-wx-content" v-if="v.collectType=='manyMsg'">
							<view class="favorites-wx-content-card">
								<view class="favorites-wx-content-card-top">
									<view class="favorites-wx-content-card-top-content">
										<view class="favorites-wx-content-card-title">{{returnParse(v.content).msgTitle}}的聊天记录</view>
										<view style="height: 10rpx;"></view>
										<view class="favorites-wx-content-card-no" :key="index" v-for="(msgson, index) in returnParse(v.content).msgDesc">{{msgson.nickname}}:{{msgson.content}}</view>
									</view>
								</view>
								<view class="favorites-wx-content-card-card">聊天记录</view>
							</view>
						</view>
						<view class="favorites-wx-bottom">
							<text>{{v.nickName}}</text>
							<text>{{fmtTime(v.send_time)}}</text>
						</view>
					</view>
					<!-- <template v-slot:right>
						<view class="favorites-wx-action-item">
							<view class="favorites-wx-action-item-btn favorites-wx-delete" @click="favoritesDeleta(v,i)">删除</view>
							<view v-if="type == '2'" class="favorites-wx-action-item-btn favorites-wx-view" @click="clickitem(v,i)">发送</view>
						</view>
					</template> -->
				</uni-swipe-action-item>
			</uni-swipe-action>
			<view class="nore_collect" v-if="list.length <= 0">
				<view class="tit">没有任何收藏</view>
				<view class="des">可以在聊天中长按消息来收藏</view>
			</view>
			<uni-load-more v-show="list.length>0" :status="queryParams.status"></uni-load-more>
		</view>
		<view v-if="showSend" class="popmask">
			<view class="popmask_cont">
				<view class="popmask_title">发送给：</view>
				<view class="wxgrouplist">
					<view class="wxgrouplist-item">
						<view class="wxgrouplist-imgs">
							<block v-for="img in collectShowUser.portrait">
								<image v-if="collectShowUser.portrait.length == 1" :src="img" mode="aspectFill" style="width: 80rpx;height: 80rpx;"></image>
								<image v-else :src="img" mode="aspectFill"></image>
							</block>
						</view>
						<view class="wxgrouplist-title">{{collectShowUser.nickName}}</view>
					</view>
				</view>
				<uni-swipe-action>
					<uni-swipe-action-item class="favorites-uni-swipe-action-item">
						<view class="favorites-wx-item" style="margin-left:0;margin-right:0;padding-left:10rpx;padding-right:0;" @click="yulan_content(sendItem)">
							<view class="favorites-wx-content favorites-wx-content-text" v-if="sendItem.collectType=='TEXT'">
								<block v-for="textitem in textChuli(sendItem.content)">
									<text space="nbsp" class="favorites-wx-text" v-if="textitem.type == 'text'">{{textitem.text}}</text>
									<text space="nbsp" class="favorites-wx-text" v-if="textitem.type == 'url'" style="color:#4D6B8B;">{{textitem.text}}</text>
								</block>
							</view>
							<view class="favorites-wx-content favorites-wx-content-img" v-if="sendItem.collectType=='IMAGE'">
								<image :src="returnParse(sendItem.content).url" mode="aspectFill"></image>
							</view>
							<view class="favorites-wx-content favorites-wx-content-video" v-if="sendItem.collectType=='VIDEO'">
								<view class="favorites-wx-content-video-img">
									<image :src="returnParse(sendItem.content).url" mode="aspectFill"></image>
									<view class="favorites-wx-content-video-icon">
										<text class="wxfont bofang"></text>
									</view>
								</view>
							</view>
							<view class="favorites-wx-content favorites-wx-content-location" v-if="sendItem.collectType=='LOCATION'">
								<view class="favorites-wx-content-location-box">
									<view class="favorites-wx-content-location-box-name">{{returnParse(sendItem.content).name}}</view>
									<view class="favorites-wx-content-location-box-address">{{returnParse(sendItem.content).address}}</view>	
									<image class="favorites-wx-content-location-box-map" src="../../static/wx/map.png" mode="aspectFit"></image>
								</view>
							</view>
							<view class="favorites-wx-content favorites-wx-content-voice" v-if="sendItem.collectType=='VOICE'">
								<view class="favorites-wx-content-voice-box">
									<view class="favorites-wx-content-voice-content">
										<!-- <text>{{returnParse(sendItem.content).time}}</text> -->
										<text class="wxfont yuyin" :class="{vmove:paused}"></text>
									</view>
									<view>{{returnParse(sendItem.content).time}}秒</view>
								</view>
							</view>
							<view class="favorites-wx-content" v-if="sendItem.collectType=='FILE'">
								<view class="favorites-wx-content-card">
									<view class="favorites-wx-content-card-top">
										<!-- <image class="favorites-wx-content-card-top-img" :src="getFileType(returnParse(sendItem.content))"></image> -->
										<view class="favorites-wx-content-card-top-content">
											<view class="favorites-wx-content-card-title">[文件] {{returnParse(sendItem.content).name}}</view>
											<!-- <view class="favorites-wx-content-card-no">{{format_size(returnParse(sendItem.content).size)}}</view> -->
										</view>
									</view>
								</view>
							</view>
							<view class="favorites-wx-content" v-if="sendItem.collectType=='CARD'">
								<view class="favorites-wx-content-card">
									<view class="favorites-wx-content-card-top">
										<image class="favorites-wx-content-card-top-img" :src="returnParse(sendItem.content).avatar"></image>
										<view class="favorites-wx-content-card-top-content">
											<view class="favorites-wx-content-card-title">{{returnParse(sendItem.content).name}}</view>
											<view class="favorites-wx-content-card-no">{{returnParse(sendItem.content).chatNo}}</view>
										</view>
									</view>
									<view class="favorites-wx-content-card-card">名片</view>
								</view>
							</view>
							<view class="favorites-wx-content" v-if="sendItem.collectType=='manyMsg'">
								<view class="favorites-wx-content-card">
									<view class="favorites-wx-content-card-top">
										<view class="favorites-wx-content-card-top-content">
											<view class="favorites-wx-content-card-title">[聊天记录] {{returnParse(sendItem.content).msgTitle}}的聊天记录</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
				<view class="send_content_text">
					<textarea :adjust-position="false" placeholder="给朋友留言" hold-keyboard maxlength="200" v-model="send_content" auto-height />
				</view>
				<view class="btn_views">
					<view @click="hidePop()" class="btn_views_li">取消</view>
					<view @click="clickitem(sendItem)" class="btn_views_li btn_views_lir">发送</view>
					<view style="clear: both;"></view>
				</view>
			</view>
		</view>
		<view v-if="tool_show" class="toolsView" :style="'top:' + tool_top + 'px;left:' + tool_left + 'px;'">
			<view @click="zhuanfa(list[tool_index])">转发</view>
			<view @click="yulan_content(list[tool_index])">查看</view>
			<view @click="favoritesDeleta(list[tool_index],tool_index)">删除</view>
		</view>
	</view>
</template>
<script>
import {
	timestampFormat,datetime_to_unix
} from '../../common/time.js';
export default {
	emits:['clickitem'],
	data() {
		return {
			queryParams: {
				refreshing: false,
				status: 'more',
				pageNum: 1,
				pageSize: 10
			},
			list:[],
			innerAudioContext:'',
			paused:false,
			types:[
				{
					label:'全部',
					value:''
				},{
					label:'文字',
					value:'TEXT'
				},{
					label:'图片',
					value:'IMAGE'
				},{
					label:'视频',
					value:'VIDEO'
				},{
					label:'位置',
					value:'LOCATION'
				},{
					label:'语音',
					value:'VOICE'
				},{
					label:'文件',
					value:'FILE'
				}
				// {
				// 	label:'名片',
				// 	value:'CARD'
				// }
			],
			sendItem: [],
			showSend: false,
			send_content: '',
			type: 1,
			collectShowUser: {
				nickName: '',
				portrait: []
			},
			winWidth: 0,
			winHeight: 0,
			tool_show: false,
			tool_top: 0,
			tool_left: 0,
			tool_index: -1,
			is_json_portrait: false
		};
	},
	// props:{
	// 	type:{
	// 		type:String,
	// 		default:'1'//1列表 2聊天窗口
	// 	},
	// 	collectShowUser:{
	// 		type: Object,
	// 		default: {
	// 			username: '',
	// 			portrait: []
	// 		}
	// 	}
	// },
	onLoad(e){
		var self = this;
		if(e.type){
			self.type = e.type;
		}
		if(e.collectShowUser){
			self.collectShowUser = JSON.parse(e.collectShowUser);
		}
		uni.getSystemInfo({
			success: function (res) {
				self.winWidth = res.windowWidth;
				self.winHeight = res.windowHeight;
			}
		});
	},
	mounted() {
		this.queryParams.refreshing=true
		this.getList('')
	},
	onPageScroll(){
		this.hideTools();
	},
	onBackPress(){
		if(this.tool_show){
			this.hideTools();
			return true;
		}
		if(this.showSend){
			this.hidePop();
			return true;
		}
	},
	computed:{
		userinfo() {
			return this.$store.state.userInfo;
		}
	},
	methods: {
		zhuanfa(data){
            var content = {userId:data.uid,content:data.collect,msgType:data.collectType};
			uni.navigateTo({
				url: this.$fc.get_package_name()+'message_zhuanfa/index?data=' + JSON.stringify(content)
			})
		},
		hideTools(){
			if(this.tool_index >= 0){
				this.list[this.tool_index].isSelect = false;
				this.tool_index = -1;
				this.tool_show = false;
			}
		},
		longpressItem(e){
			if(this.type == 1){
				var clientX = e.changedTouches[0].clientX;
				var clientY = e.changedTouches[0].clientY;
				if(this.winWidth - clientX < 150){
					this.tool_left = clientX - 110;
				}else{
					this.tool_left = clientX;
				}
				if(this.winHeight - clientY < 140){
					this.tool_top = clientY - 100;
				}else{
					this.tool_top = clientY;
				}
				var tool_index = e.currentTarget.dataset.key;
				if(tool_index != this.tool_index && this.tool_index >= 0){
					this.list[this.tool_index].isSelect = false;
				}
				this.tool_index = tool_index;
				this.list[this.tool_index].isSelect = true;
				this.tool_show = true;
			}
		},
		tapListItem(i){
			var self = this;
			if(self.tool_show == true){
				self.hideTools();
				return;
			}
			self.list[i].isSelect = true;
			setTimeout(function(){
				self.list[i].isSelect = false;
				var item = self.list[i];
				if(self.type == 1){
					self.yulan_content(item);
				}else if(self.type == 2){
					if(self.collectShowUser.userType == 'GROUP'){
						if(!self.is_json_portrait){
							self.collectShowUser.portrait = JSON.parse(self.collectShowUser.portrait);
							self.is_json_portrait = true;
						}
					}else{
						var userPortrait = self.collectShowUser.portrait;
						self.collectShowUser.portrait = [];
						self.collectShowUser.portrait.push(userPortrait);
					}
					self.sendItem = item;
					self.showSend = true;
				}
			},100)
		},
		hidePop(){
			this.showSend = false;
		},
		yulan_content(item){
			switch(item.collectType){
				case 'TEXT':
					uni.navigateTo({
						url: this.$fc.get_package_name()+'favorites/textdetails?text=' + item.content
					});
					break;
				case 'IMAGE':
					this.$fc.previewImagesolo(this.returnParse(item.content).url);
					break;
				case 'VIDEO':
					this.openVideo(this.returnParse(item.content).videoUrl);
					break;
				case 'LOCATION':
					this.goMap(this.returnParse(item.content));
					break;
				case 'VOICE':
					//this.playVOICE(this.returnParse(item.content).url);
					break;
				case 'FILE':
					this.lookFile(this.returnParse(item.content));
					break;
				case 'CARD':
					this.goAddfriend(this.returnParse(item.content));
					break;
				case 'manyMsg':
					if(this.returnParse(item.content).msgList){
						var msgInfo = item.content;
						var msgId = '';
					}else{
						var msgInfo = '';
						var msgId = this.returnParse(item.content).msgId;
					}
					uni.navigateTo({
						url: this.$fc.get_package_name()+'favorites/manymsg?msgId=' + msgId + '&msgInfo=' + msgInfo + '&windowType=' + item.message_type
					})
					break;
				default:
					break;
			}
		},
		textChuli(content) {
			content = content.replace(/\r|\n/ig,"");
			return this.$fc.textGetUrl({content:content});
		}, 
		fmtTime(time) {
			return timestampFormat(time);
		},
		format_size(size){
		    return this.$fc.sizeFilter(size);
		},
		getFileType(item) {
		    var type = item.ext ? item.ext : 'other';
			return this.$fc.getFileType(type);
		},
		clickitem(e){
			var pages = getCurrentPages();
			var prevPage = pages[pages.length -2];
			prevPage.$vm.clickitem(e,0);
			if(this.send_content != ''){
				var obj = {};
				obj.collectType = 'TEXT';
				obj.content = this.send_content;
				prevPage.$vm.clickitem(obj,0);
			}
			this.hidePop();
			this.$nextTick(function(){
				uni.navigateBack({
					delta: 1
				}).then(()=>{
					
				})
			})
			
			// this.hidePop();
			// this.$nextTick(function(){
			// 	uni.showToast({
			// 		title: '消息已发送',
			// 		icon: 'none'
			// 	})
			// })
		},
		lookFile(e){
			this.$fc.plusDownload({onlinePath:e.url}).then(res=>{
				this.$fc.plusOpenFile({filePath:res})
			})
		},
		favoritesDeleta(e,i){
			uni.showModal({
				title: '警告',
				content: '是否确认删除收藏',
				success: (res)=> {
					if (res.confirm) {
						this.$http.request({
							url: '/collect/remove',
							method: 'POST',
							data:JSON.stringify({
								id: e.collectId
							}),
							success: (res) => {
								if (res.data.code == 200) {
									this.list.splice(i,1)
								}
							}
						});
					} else if (res.cancel) {
						
					}
				}
			});
		},
		goAddfriend(e){
			uni.navigateTo({
				url:'../personInfo/detail?param='+e.userId+'&source=2'
			})
		},
		returnParse(txt) {
			return JSON.parse(txt);
		},
		getList(e){
			uni.showLoading();
			this.queryParams.status='loading'
			this.$fc.loadMore({
				url: '/collect/collectlist?collectType='+e,
				queryParams: this.queryParams
			}).then(res => {
				this.queryParams = res.queryParams;
				if (res.status=='3') {
					this.list=[]
					return
				}
				if (res.status=='0') {
					return
				}
				var rows = res.list;
				var list = [];
				for (var i = 0; i < rows.length; i++) {
					var item = rows[i];
					list.push(item);
				}
				if (res.status=='2') {
					this.list = list;
				}
				if (res.status=='1') {
					this.list = this.list.concat(list);
				}
				console.log(this.list);
			});
		},
		playVOICE(url){
			if(this.paused){
				this.innerAudioContext.destroy()
				this.paused=!this.paused
				return
			}
			this.innerAudioContext = uni.createInnerAudioContext();
			// var url='https://www.w3school.com.cn/i/horse.ogg'
			this.innerAudioContext.sessionCategory='soloAmbient'
			this.innerAudioContext.src = url;
			this.innerAudioContext.play()
			
			this.innerAudioContext.onPlay(() => {
				// console.log('播放')
				this.paused=true
			})
			this.innerAudioContext.onPause(() => {
				// console.log('暂停')
				this.paused=false
				this.innerAudioContext.destroy()
			})
		},
		goMap(e) {
			uni.openLocation({
				name: e.name,
				address: e.address,
				latitude: e.latitude,
				longitude: e.longitude,
				success: function() {}
			});
		},
		openVideo(url){
			this.$fc.openVideo(url);
		},
		clickType(e){
			this.queryParams.refreshing=true
			this.getList(e.value)
		}
	},
	onPullDownRefresh() {
		this.queryParams.refreshing=true
		this.getList('');
	},
	onReachBottom() {
		this.getList('');
	},
	onNavigationBarButtonTap(e) {
		switch (e.index) {
			case 0:
			uni.showToast({
				title:'添加',
				icon:'none'
			})
				break;
			default:
				break;
		}
	},
};
</script>

<style scoped lang="scss">
	.bgColor{
	    background: #EDEDED;
	 }
	.favorites-wx{
		display: flex;
		flex-direction: column;
	}
	.favorites-wx-item{
		flex: 1;
		display: flex;flex-direction: column;
		margin:0 24rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 38rpx;
	}
	.favorites-wx-content{
		display: flex;flex-direction: row;
	}
	.favorites-wx-bottom{
		display: flex;flex-direction: row;align-items: center;
		margin-top: 12rpx;
	}
	.favorites-wx-bottom text{
		margin-right: 24rpx;
		font-size: 24rpx;
		color: #999;
	}
	.favorites-wx-top{
		margin: 24rpx;
		padding: 24rpx;
		display: flex;flex-direction: row;flex-wrap: wrap;
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
	}
	.favorites-wx-top-item{
		color: #5F698C;
		width: 33.333%;
		box-sizing: border-box;
		padding: 0 24rpx;
		margin: 24rpx 0;
		text-align: center;
		overflow: hidden;
	}
	.favorites-wx-top-item:nth-child(3n-1){
		border-left: 1px #ddd solid;
		border-right: 1px #ddd solid;
	}
	.favorites-wx-content-text{
		line-height: 40rpx;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.favorites-wx-text{
		color: #333;
		font-size: 32rpx;
		word-break: break-all;
	}
	.favorites-wx-content-img image{
		width: 160rpx;
		height: 160rpx;
	}
	 
	
	.favorites-wx-content-video{
		
	}
	.favorites-wx-content-video-img,.favorites-wx-content-video-img image{
		width: 160rpx;
		height: 160rpx;
		position: relative;
	}
	.favorites-wx-content-video-icon{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		display: flex;flex-direction: row;justify-content: center;align-items: center;
	}
	.favorites-wx-content-video-icon text{
		font-size: 64rpx;
		color: #dddddd;
		text-shadow: 0px 0px 5px rgba(0,0,0,0.3);
	}
	.favorites-wx-content-location{
	}
	.favorites-wx-content-location-box {
		border: 1px #f6f6f6 solid;
		display: flex;
		flex-direction: column;
		width: 100%;
		border-radius: 12rpx;
		padding: 24rpx 0;
	}
	.favorites-wx-content-location-box-name {
		font-size: 32rpx;
		color: #000000;
		// font-weight: bold;
	}
	.favorites-wx-content-location-box-address {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 12rpx;
	}
	.favorites-wx-content-location-box-map {
		background-color: #e5ffff;
		overflow: hidden;
		width: 100%;
		height: 150rpx;
	}
	.favorites-wx-content-voice-box{
		display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;
	}
	.favorites-wx-content-voice{}
	.favorites-wx-content-voice-vmove{
		animation: scalevVoice 1s linear infinite;
		transform: scale(1);
	}
	@keyframes scalevVoice {
		0% {
			transform: scale(1);
		}
		50% {
			transform: scale(1.3);
		}
		100% {
			transform: scale(1);
		}
	}
	.favorites-wx-content-voice-tras{
		display: flex;flex-direction: row;align-items: center;
	}
	.favorites-wx-content-voice-tras text{
		padding:6rpx 12rpx;
		font-size: 24rpx;
		background-color: #eee;
		border-radius: 12rpx;
		color: #bcbcbc;
		margin:0 12rpx;
	}
	.favorites-wx-content-voice-content{
		padding: 20rpx 24rpx;
		border-radius: 12rpx;
		background-color: #eee;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 20rpx;
	}
	.favorites-wx-content-voice-text{
		width: 100%;
		font-size: 26rpx;
		color: #666;
		word-break: break-all;
	}
	.favorites-wx-content-card{
		width: 100%;
		box-sizing: border-box;
		border: 1px #f6f6f6 solid;
		padding: 24rpx 0;
		border-radius: 12rpx;
	}
	.favorites-wx-content-card-top{
		display: flex;flex-direction: row;align-items: center;
	}
	.favorites-wx-content-card-top-img{
		width: 80rpx;
		min-width: 80rpx;
		height: 80rpx;
		margin-right: 24rpx;
		border-radius: 6rpx;
	}
	.favorites-wx-content-card-top-content{
		overflow: hidden;
		display: flex;flex-direction: column;
	}
	.favorites-wx-content-card-title{
		color: #070707;
		font-size: 32rpx;
	}
	.favorites-wx-content-card-no{
		font-size: 24rpx;
		color: #999;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.favorites-wx-content-card-card{
		font-size: 24rpx;
		color: #666;
		margin-top: 24rpx;
	}
	.favorites-wx-view{
		background-color: #00aaff;
	}
	.favorites-wx-delete{
		background-color: #F55C23;
	}
	.favorites-wx-action-item-btn{
		color: #fff;
		padding:0 24rpx;
		flex: 1;
		display: flex;flex-direction: row;justify-content: center;align-items: center;
	}
	.favorites-wx-action-item{
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}
	.favorites-uni-swipe-action-item{
		margin-bottom: 24rpx;
	}
	.favorites-uni-swipe-action-item:nth-last-child(1){
		margin-bottom: 0;
	}
	.favorites-wx-tips{
		width: 100%;
		color: #999;
		font-size: 24rpx;
		text-align: center;
	}
	.vmove{
		animation: scalev 1s linear infinite;
		transform: scale(1);
	}
	.favoriteswxitemactive{
		background: #f5f5f5 !important;
	}
	.popmask {
		background: rgba(0,0,0,0.4);
		position: fixed;
		width: 100%; 
		height: 100%; 
		top: 0; 
		left: 0;
		z-index: 9999999;
	}
	.popmask_cont {
		position: relative;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		-moz-transform: translateX(-50%) translateY(-50%);
		-webkit-transform: translateX(-50%) translateY(-50%);
		-ms-transform: translateX(-50%) translateY(-50%);
		-o-transform: translateX(-50%) translateY(-50%);
		background: #ffffff;
		border-radius: 10rpx;
		width: 70%;
		padding: 40rpx 40rpx 0 40rpx;
	}
	.popmask_title{
		font-size: 34rpx;
		color: #000;
		font-weight: 700;
	}
	.wxgrouplist{
		padding-top: 20rpx;
		display: flex;
		flex-direction: column;
	}
	.wxgrouplist-item{
		background-color: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.wxgrouplist-imgs{
		width: 80rpx;
		height: 80rpx;
		border-radius: 12rpx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		background-color: #f5f5f5;
	}
	.wxgrouplist-imgs image{
		margin: 2rpx;
		width: 36rpx;
		height: 36rpx;
	}
	.wxgrouplist-title{
		flex: 1;
		font-size: 32rpx;
		color: #333;
		line-height: 105rpx;
		margin-left: 20rpx;
	}
	.btn_views{
		margin-top: 60rpx;
		border-top: 1px solid #eee;
	}
	.btn_views_li{
		float: left;
		width: 35%;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 36rpx;
	}
	.btn_views_lir{
		float: right;
		color: #09C160;
	}
	.send_content_text{
		overflow: auto;
		width: 96%;
		padding-left: 2%;
		padding-right: 2%;
		min-height: 40rpx;
		max-height: 100rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		background-color: #f5f5f5;
	}
	.send_content_text textarea{
		box-sizing: border-box !important;
		font-size: 28rpx;
		line-height: 40rpx;
		margin: 10rpx 0;
		width: 100%;
	}
	.toolsView{
		position: fixed;
		z-index: 9999999;
		width: 80px;
		padding: 0 15px;
		background: #ffffff;
		box-shadow: 0 0 10px #c3c3c3;
	}
	.toolsView view{
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #eee;
		font-size: 32rpx;
	}
	.nore_collect{
		text-align: center;
		padding-top: 100rpx;
		background: #ffffff;
	}
	.nore_collect .tit{
		height: 60rpx;
		line-height: 60rpx;
		font-size: 32rpx;
	}
	.nore_collect .des{
		font-size: 28rpx;
	}
</style>
